<template>
  <div class="mod-config">
    <!-- 余额变动记录{{this.$route.query}} -->
    <basic-container>
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="最小时间" prop="beginTime">
          <div class="demo-datetime-picker">
            <div class="block">
              <el-date-picker v-model="queryParams.beginTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择最小充值时间" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="最大时间" prop="endTime">
          <div class="demo-datetime-picker">
            <div class="block">
              <el-date-picker v-model="queryParams.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择最大充值时间" />
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="avue-crud">
        <el-table :data="dataList" border style="width: 100%">
          <el-table-column prop="parkName" header-align="center" align="center" label="变动时间">
          </el-table-column>
          <el-table-column prop="name" header-align="center" align="center" label="变动金额">
          </el-table-column>
          <el-table-column prop="address" header-align="center" align="center" label="变动类型">
          </el-table-column>
          <el-table-column prop="loginName" header-align="center" align="center" label="变动原因">
          </el-table-column>
          <el-table-column prop="contacts" header-align="center" align="center" label="原因类型">
          </el-table-column>
          <el-table-column prop="telephone" header-align="center" align="center" label="操作人">
          </el-table-column>
          <el-table-column prop="merchantDescribe" header-align="center" align="center" label="备注">
          </el-table-column>
        </el-table>
      </div>
      <div class="avue-crud__pagination">
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
          :current-page="queryParams.current" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.size"
          :total="total" background layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>

    </basic-container>
  </div>
</template>

<script>
import { merList } from '@/api/operate/merchant.js'
export default {
  data () {
    return {
      queryParams: {
        current: 1,
        size: 10,
        merchantId: null
      },
      dataList: [],
      total: 0
    }
  },
  created () {
    this.queryParams.merchantId = this.$route.query.merchantId
    this.getDataList()
  },
  methods: {
    getDataList () {
      merList(this.queryParams).then((response) => {
        this.dataList = response.data.data.records
        this.total = response.data.data.total
      })
    },




    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    handleQuery () {
      this.queryParams.current = 1;
      this.getDataList()
    },
    resetQuery () {
      this.queryParams = {
        current: 1,
        size: 10,
        merchantId: null
      };
      this.handleQuery()
    }
  },
}
</script>

<style>
</style>